<template>
  <div
    class="applicationcode"
    @click="goback"
  >
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    /> -->
    <div class="wrapper">
      <div class="chart-head">{{ chartTitle }}</div>
      <div
        ref="chartLine666"
        class="cardEcharts"
      />
    </div>
  </div>

</template>

<script>
import $api from '@/api/index'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      NewAddData: [],
      countData: [],
      chartTitle: this.$route.query.name
    }
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  beforeCreate() {
    this.$dd.showTitleBar()
  },
  mounted() {
    // this.$dd.rotateView({
    //   showStatusBar: true, // 否显示statusbar
    //   clockwise: true, // 是否顺时针方向
    //   onSuccess: function(result) {
    //   }
    // })
    this.$dd.setTitle({
      title: '数据统计'
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
    this.cumulativeCountAreaScope()
  },
  methods: {

    cumulativeCountAreaScope() {
      $api.user.cumulativeCountAreaScope({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.drawLine666([res.data.withinCount, res.data.outSideCount])
      })
    },
    drawLine666(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine666)

      // arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 3, 5]
      var option = {
        title: { undefined,
          show: false
        },

        color: ['#4989F2', '#00C720'],
        tooltip: {
          trigger: 'item',
          // trigger: 'item',
          textStyle: {
            fontSize: 10
          },
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999',
              fontSize: 13
            }
          },
          position: ['30%', '40%']
        },
        grid: { // 图表和父盒子之间的距离
          left: '8%',
          right: '8%',
          bottom: '2%',
          top: '20%',
          containLabel: true
        },
        legend: { // 图例
          top: '5%',
          right: '8%',
          itemHeight: 14,
          itemWidth: 30,
          data: [
            {
              textStyle: {
                color: '#1D2129',
                fontWeight: '400',
                fontSize: '14px'
              }
            }
            // {
            //   name: '任务执行失败',
            //   textStyle: {
            //     color: '#666666'
            //   }
            // }
          ]
        },
        xAxis: { // x轴
          type: 'category',
          data: ['累计境内隔离人数', '累计境外隔离人数'],

          axisLabel: {
            interval: 0,
            formatter: function(params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 6 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            },
            textStyle: {
              color: '#232323', // 文字的颜色
              fontWeight: '400',
              fontSize: 14
            },
            margin: 30,
            rotate: 20
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E8ECF6'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: { // x轴的坐标文字
            show: true,
            margin: 24,
            width: 60,
            textStyle: {
              color: '#232323', // 文字的颜色
              fontSize: 14,
              fontWeight: '400'
            }

          },
          minInterval: 2, // 显示最小刻度
          //   max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: { // 坐标在grid区域的分割线
            lineStyle: { // 设置分割线的样式(图表横线颜色)
              color: '#E8ECF6',
              type: 'solid'
            }
          }
        },
        series: [
          {
            type: 'bar', // 柱状图
            data: val,
            barGap: '40%', // 柱间间距
            barWidth: '30%', // 柱状体的宽度
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(233, 237, 247, 1)',
            //   borderRadius: [28, 28, 28, 28]
            // },
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#4989F2' },
              { offset: 1, color: '#ffffff' }
            ]),
            itemStyle: {
              borderRadius: [28, 28, 28, 28]
            },
            label: {
              show: true,
              position: 'top',
              color: '#232323',
              fontSize: 14
            }
          }
        ]
      }
      myChart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
    width:100%;
    background-color: #F7FBFF;
    height:100%;
    padding: 28px;
    box-sizing: border-box;
}
.wrapper{
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 6px 12px 2px rgba(39,138,210,0.15);
    height: 100%;
    .chart-head{
      height: 92px;
      padding: 24px;
      text-align:center;
      font-size: 32px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #4989F2;
      box-sizing: border-box;
      box-shadow: 0px 12px 12px 2px rgba(101,159,255,0.12);
    }
  .cardEcharts{
      // width:calc(100% + 400px);
      width:100%;
      height:calc(100% - 126px);
    }
}
</style>
